<template>
	<scroll-view 
		class="tabs-scroll" 
		enable-flex 
		scroll-x 
		scroll-with-animation 
		:scroll-into-view="'item_' + scrollToIndex"
	>
		<view class="tabs">
			<view 
				class="tabs-item" 
				:class="{'tabs-active': index == innerIndex, 'tabs-fill': isFill}" 
				hover-class="btn-hover" 
				v-for="(item, index) in tabs" 
				:key="index" 
				:id="'item_' + index"
				@click="onTabItemChange(index)"
			>
				<!-- 前缀 -->
				<view class="tabs-item-prefix" v-if="item.prefix">
					<image 
						class="tabs-item-icon" 
						:style="{filter: getDropShadow(index == innerIndex ? activeStyle.color : inactiveStyle.color)}"
						:src="item.prefix" 
						mode="aspectFit" 
					></image>
				</view>
				<!-- 文本 -->
				<view 
					class="tabs-item-text u-line-1" 
					:style="[index == innerIndex ? activeStyle : inactiveStyle]"
				>{{ item.name }}</view>
				<!-- 后缀 -->
				<view 
					v-if="item.suffix" 
					class="tabs-item-suffix" 
					:style="{ color: index == innerIndex ? activeStyle.color : inactiveStyle.color }"
				>{{ item.suffix }}</view>
				
				<!-- 选中背景图 -->
				<image 
					v-if="lineImageStyle" 
					class="tabs-bg" 
					:src="lineColor" 
					:style="[lineImageStyle]"
					mode="aspectFit" 
				></image>
				<!-- 选中条 -->
				<view class="tabs-line" v-else :style="{background: lineColor}"></view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			tabs: {
				type: Array,
				default: () => []
			},
			tabIndex: {
				type: Number,
				default: -1
			},
			// 拉伸填充剩余空间
			fill: Boolean,
			// 自动拉伸填充剩余空间（小于5条时）
			autoFill: Boolean,
			// 选中时的颜色
			activeStyle: {
				type: Object,
				default: () => ({})
			},
			// 未选中时的颜色
			inactiveStyle: {
				type: Object,
				default: () => ({})
			},
			// 选中条的背景色或背景图
			lineColor: String,
			// 选中条为背景图时的样式
			lineImageStyle: Object,
		},
		computed: {
			isFill() {
				if (this.fill) return true
				if (this.autoFill && this.tabs && this.tabs.length < 5) {
					return true
				}
				return false
			}
		},
		watch: {
			tabIndex(index) {
				if (this.innerIndex != index) {
					this.innerIndex = index
					this.$nextTick(() => {
						this.scrollToIndex = index
					})
				}
			}
		},
		data() {
			return {
				innerIndex: this.tabIndex,
				scrollToIndex: -1,
			}
		},
		mounted() {
			// #ifdef H5
			this.$nextTick(() => {
				this.scrollToIndex = this.tabIndex
			})
			// #endif
		},
		methods: {
			onTabItemChange(index) {
				if (index <= this.innerIndex) {
					this.scrollToIndex = Math.max(index - 2, 0)
				} else {
					this.scrollToIndex = index
				}
				if (index != this.innerIndex) {
					this.$emit('change', index)
				}
				this.innerIndex = index
			},
			getDropShadow(color) {
				return `drop-shadow(16px 0px ${color})`
			}
		}
	}
</script>

<style lang="scss" scoped>
	$tabsHeight: 88rpx;
	
	.tabs-scroll {
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		overflow: hidden;
		.tabs {
			height: $tabsHeight;
			display: flex;
			flex-wrap: nowrap;
			&-item {
				height: 100%;
				max-width: 350rpx;
				padding: 0 30rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				&-prefix {
					width: 32rpx;
					height: 32rpx;
					margin-right: 6rpx;
					overflow: hidden;
					.tabs-item-icon {
						width: 100%;
						height: 100%;
						vertical-align: top;
						transform: translateX(0);
						transition: transform .3s;
					}
				}
				&-text {
					font-size: 30rpx;
					font-weight: normal;
					line-height: 1;
					color: $u-main-color;
				}
				&-suffix {
					font-size: 28rpx;
					line-height: 1;
					color: $u-content-color;
				}
				.tabs-line {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%) translateY(20rpx);
					transition: transform .3s;
					width: 40rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background: linear-gradient(100deg, #1CB1FC 15%, $u-primary 86%);
				}
				.tabs-bg {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%) translateY($tabsHeight);
					transition: transform .3s;
				}
			}
			// 选中时
			&-item.tabs-active {
				.tabs-item-prefix {
					.tabs-item-icon {
						transform: translateX(-100%);
						filter: drop-shadow(16px 0px $u-primary);
					}
				}
				.tabs-item-text {
					// font-size: 17px;
					font-weight: 600;
					color: $u-primary;
				}
				.tabs-item-suffix {
					color: $u-primary;
				}
				.tabs-line {
					transform: translateX(-50%) translateY(0);
				}
				.tabs-bg {
					transform: translateX(-50%) translateY(0);
				}
			}
			.tabs-fill {
				flex: 1;
			}
		}
	}
	
</style>